React Development with the Shards React Library — Collapse, Dropdowns, and Fade Effects

Shards React is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Column Order and Offset

We can set the order and offset of the columns.

For instance, we can write:

import React from "react";
import { Container, Row, Col } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <Container>
        <Row>
          <Col sm={{ size: 6, order: 2, offset: 2 }}>2</Col>
          <Col sm={{ size: 2, order: 1, offset: 2 }}>1</Col>
        </Row>
      </Container>
    </div>
  );
}

to set the order property to change the order.

And we can change the offset to change the offset size.

Collapse

We can add a collapse component into our React app with Shards React.

For instance, we can write:

import React, { useState } from "react";
import { Button, Collapse } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [collapse, setCollapse] = useState(false);

  const toggle = () => {
    setCollapse((c) => !c);
  };
  return (
    <div className="App">
      <Button onClick={toggle}>Toggle</Button>
      <Collapse open={collapse}>
        <div className="p-3 mt-3 border rounded">
          <h5>Lorem ipsum</h5>
          <span>Lorem ipsum</span>
        </div>
      </Collapse>
    </div>
  );
}

We have the collapse state which we pass into the open prop to control whether the Collapse component is displayed or not.

The Bootstrap styles are required for it to work properly.

Dropdown

We can add dropdowns with the Dropdown , DropdownToggle , DropdownMenu and DropdownItem components.

For instance, we can write:

import React, { useState } from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [open, setOpen] = useState(false);

  const toggle = () => {
    setOpen((c) => !c);
  };
  return (
    <div className="App">
      <Dropdown open={open} toggle={toggle}>
        <DropdownToggle>Dropdown</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Action</DropdownItem>
          <DropdownItem>Another action</DropdownItem>
          <DropdownItem>Something else here</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  );
}

We add the Dropdown component to add the dropdown container.

DropdownToggle has the dropdown rtoggle.

DropdownMenu has the dropdown menu.

DropdownItem has the dropdown items.

We set the open prop to control when it’s open.

The toggle prop has the toggle function to control the open state.

Fade

The Fade component lets us add a fade effect to our React app.

For instance, we write:

import React, { useState } from "react";
import { Fade, Button } from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [visible, setVisible] = useState(false);

  const toggle = () => {
    setVisible((c) => !c);
  };
  return (
    <div className="App">
      <Button onClick={toggle} className="mb-2">
        Toggle
      </Button>
      <Fade in={visible} className="p-1">
        lorem ipsum
      </Fade>
    </div>
  );
}

to add a Button to toggle the Fade component.

The in prop lets us set the visibility of the Fade component.

And the toggle function toggles the visible state to control Fade ‘s visibility.

Conclusion

We can add collapse, dropdowns, and fade effects into our React app with Shard React.